<template>
<div class="blog-box">
    <div class="cp">
    <div class="author-info">
      <img :src="require('@/assets/avator/'+blogDetail.avatar)" alt="avatar" class="avatar">
      <div class="author-name">{{blogDetail.username}}</div>
      <div class="author-date">{{ blogDetail.blog.blogtime }}</div>
    </div>
    <div class="article-info" @click="toDetail(blogDetail.blog.postid)">
        <div class="title">{{ blogDetail.blog.title }}</div>
        <div class="content">
            <div class="imagebox">
                <el-image v-for="(item,index) in blogimgs" 
                 fit="cover" 
                :key="index" :src="require('../assets/blogImg/'+item)" 
                class="blogimg"></el-image>
            </div>
            <p style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-indent: 2em;margin-top: 10px;">
                {{ blogDetail.content }}
            </p>
        </div>
    </div>
</div>
    <div class="article-footer">
        <ul>
            <li :class="isClicked?'agreebtn agr':'agr'"  @click="handleAgree(blogDetail.blog.postid)"><i class="iconfont icon-dianzan"></i>点赞({{ blogDetail.blog.agree }})</li>
            <li :class="isDisagree?'agreebtn agr':'agr'" @click="handleDisagree(blogDetail.blog.postid)"><i class="el-icon-caret-bottom"></i></li>
            <li :class="isShowComment?'coms activeComment':'coms'" @click="showComment(blogDetail.blog.postid)"><i class="el-icon-chat-dot-round"></i>评论</li>
        </ul>
        <Comment v-show="isShowComment"
            :blogid="blogDetail.blog.postid"
            :commentList="commentList"
          />
    </div>
</div>
</template>
<script>
import {GetUserInfo,IsLiked,BlogAgree,BlogDisagree,BlogDeAgree,BlogDeDisagree,GetCommentByBlogId,LikePage,DeleteLike} from '../request/api'
import Comment from '../components/comment.vue'
import { mapState ,mapMutations,mapActions} from 'vuex'
export default {
  data(){
    return{
        params:{
            userid:null,
            blogid:null,
        },
        userInfo:{},
        blogimgs:[],
        avatar:'',
        isClicked:false,
        isDisagree:false,
        isShowComment:false,
        commentList: [],
        isClickedComment:false,
        isLike:false,
        isSelected:false,
        str:''
    }
  },
  components:{
    Comment
  },
  props:{
        blogDetail:{
            type:Object,
            required:true
        },
    },
    computed:{
        
    },
    methods:{
        ...mapMutations({
            setCommentList:'comment/setCommentList'
        }),
        ...mapActions({
            asyncChangeIsShowToast:'toastStatus/asyncChangeIsShowToast'
        }),
        async handleAgree(blogid){
            
                if(this.isClicked){
                    // 取消点赞
                    let ress = await BlogDeAgree(this.params)
                    this.blogDetail.blog.agree = this.blogDetail.blog.agree - 1
                    this.isClicked = false
                }else{
                        // 保存+1信息
                    this.params.blogid = blogid
                    console.log("点赞",this.params)
                    let res = await BlogAgree(this.params)
                    // 保存likeInfo
                    // 刷新数据
                    this.blogDetail.blog.agree = this.blogDetail.blog.agree + 1
                    this.isClicked = true
                }
           
        },
        async handleDisagree(blogid){
                if(this.isDisagree){
                    let ress =await BlogDeDisagree(this.params)
                    this.blogDetail.disagree = this.blogDetail.disagree - 1
                    // console.log(ress)
                    this.isDisagree = false
                }else{
                    // 保存+1信息
                    this.params.blogid = blogid
                    let res = await BlogDisagree(this.params)
                    // console.log("disagree res",res)
                    // 保存likeInfo
                    // 刷新数据
                    this.blogDetail.disagree = this.blogDetail.disagree + 1
                    this.isDisagree = true
                    this.isSelected = true
            }
            
        },
        // 得到用户信息的方法
        async getUserInfoById(userid){
            this.params.userid = userid
            let res = await GetUserInfo(this.params)
            return res.data.data
        },
        async showComment(blogid){
            if(this.isClickedComment){
                this.isShowComment = !this.isShowComment
                this.isClickedComment = false
                this.commentList = []
                this.setCommentList(this.commentList)
                return
            }else{
            //发请求得到评论相关的数据 
            this.params.blogid = blogid
            this.params.userid = 2
            let res = await GetCommentByBlogId(this.params)
            // 分类数据
            this.comments = res.data.data
            for(const item of this.comments){
                // 一级评论
                if(item.istop == "1"){
                    // 根据userid请求用户数据
                    // 封装commentuser
                    const commentUser1={
                            id:null,
                            nickName:'',
                            avatar:''
                    }
                    this.getUserInfoById(item.commentuserid).then(result =>{
                        commentUser1.id = result.userid
                        commentUser1.nickName = result.name
                        commentUser1.avatar = require('../assets/avator/'+result.avator)
                    })
                    // 封装一级评论
                    const comment={
                        id:null,
                        commentUser:{},
                        targetUser:{},
                        content:'',
                        createDate:'',
                        childrenList:[]
                    }
                    comment.id = item.commentid
                    comment.commentUser = commentUser1
                    comment.content = item.content
                    comment.createDate = item.createdate
                    // 封装完成，push
                    this.commentList.unshift(comment)
                }else if(item.istop == "0"){
                    // 二级评论先分类
                    // 根据userid请求用户数据
                    // 封装commentuser
                    const commentUser={
                            id:null,
                            nickName:'',
                            avatar:''
                    }
                    this.getUserInfoById(item.commentuserid).then(result =>{
                        commentUser.id = result.userid
                        commentUser.nickName = result.name
                        commentUser.avatar = require('../assets/avator/'+result.avator)
                    })
                    // targetUser
                    const targetUser={
                        id:null,
                        nickName:''
                    }
                    // 获取回复的用户信息
                    this.getUserInfoById(item.targetuserid).then(result =>{
                        targetUser.id = result.userid
                        targetUser.nickName = result.name
                    })
                    // 封装成二级评论
                    const commentTwo={
                        id:null,
                        commentUser:{},
                        targetUser:{},
                        content:'',
                        createDate:'',
                        whichcomment:null
                    }
                    commentTwo.id = item.commentid
                    commentTwo.commentUser = commentUser
                    commentTwo.targetUser = targetUser
                    commentTwo.content = item.content
                    commentTwo.createDate = item.createdate
                    commentTwo.whichcomment = item.whichcommentid
                    // 分类保存到一级评论中---将二级评论中的whichcomment 与 id比较
                    this.commentList.forEach(item =>{
                        if(commentTwo.whichcomment == item.id){
                            item.childrenList.unshift(commentTwo)
                        }
                    })
                    this.setCommentList(this.commentList)
                    // console.log("二级分类之后的commentList：",this.commentList)
                }
            }
            this.isShowComment = !this.isShowComment
            this.isClickedComment = true
            }
        },
        toDetail(blogid){
            this.$router.push({
                path:'/home/detail',
                query:{
                    blogid:blogid,
                    userid:this.blogDetail.userid
                }
            })
        },
        
        
    },
    async created(){
         let str = this.blogDetail.blog.blogimg
         if(str){
             if (str.startsWith("[") && str.endsWith("]")) {
                 // 去除字符串中的方括号和空格，然后使用逗号分隔字符串
                 this.blogimgs = str.slice(1, -1).split(", ").map(item => item.trim());
             }
         }
    },
}
</script>

<style scoped>
.cp{
    cursor: pointer;
}
.isLike{
    color: red;
}
.agreebtn{
    background-color: #409EFF;

}

.activeComment{
    background-color: #C0C4CC;
}



.blog-box{
    border-bottom: 1px solid #e3dede;
    margin: 10px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* background-color: #F2F6FC; */
}
.agr{
    border-radius: 3px;
}
.agr:hover{
    background-color:rgb(160,207,255);
}
.coms{
    border-radius: 3px;
}
.coms:hover{
    background-color: #909399;
}
.author-info{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
.avatar{
    width: 40px;
    height: 40px;
    margin-right: 5px;
}
.author-name{
    margin-right: 5px;
    color: black;
    font-size: large;
}
.author-date{
    position: absolute;
    right: 10px;
}
.article-info{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

}
.title{
    font-size: large;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 10px;
}
.content{
    font-size: 14px;
}
ul{
    list-style: none;
    display: flex;
    flex-direction: row;
}
li{
    margin-right: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 5px;
    cursor: pointer;
}
.imagebox{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
}
.blogimg{
    margin-right: 5px;
    width: 250px;
    height: 200px;
}
.article-footer{
    margin-top: 10px;
}
</style>
